<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         body {
        /* Prevent the user selecting text in the example */
        user-select: none;
      }
      #draggable {
        text-align: center;
        background: white;
      }
      .dropzone {
        width: 200px;
        height: 20px;
        background: blueviolet;
        margin: 10px;
        padding: 10px;
      }
      .dropzone.dragover {
        background-color: purple;
      }
      .dragging {
        opacity: 0.5;
      }
    </style>
</head>
<body>
    <div class="dropzone">
        <div id="draggable" draggable="true">这个可以拖动</div>
    </div>
    <div class="dropzone" id="droptarget"></div>
    <script>
        const dragItem = document.querySelector('#draggable')
        const dropTarget =document.querySelector('#droptarget')
        
        
        // let dragged 
        // // 拖动触发事件
        // dragItem.addEventListener('drag',()=>{
        //     console.log('dragging');
        // })
        // // 开始拖得时候触发一次
        // dragItem.addEventListener('dragstart',(e)=>{
        //     console.log('start');
        //      dragged = e.target
        //     dragged.classList.add('dragging')
        // })
        
        // dragItem.addEventListener('dragend',(e)=>{
        //     console.log('end');
        //     dragged.classList.remove('dragging')
        // })
        // 拖动到哪去？
        dropTarget.addEventListener('dragover',(e)=>{
            e.preventDefault()
            console.log('dragover');
        })
        dropTarget.addEventListener('drop',(e)=>{
            e.preventDefault()
            dragItem.parentNode.removeChild(dragItem)
            dropTarget.appendChild(dragItem)
        })

        // dropTarget.addEventListener('dragenter',()=>{
        //     dropTarget.classList.add('dragover')
        // })
        // dropTarget.addEventListener('dragleave',()=>{
        //     dropTarget.classList.remove('dragover')
        // })

    </script>
</body>
</html>